<template>
	<view class="container">
		color
		<view></view>
		<view>logined: {{ logined }}</view>		
		<view>userInfo: {{ JSON.stringify(userInfo) }}</view>
		<view>counting: {{ counting }}</view>
		<view>counting: {{ countDownTime }}</view>
		<view>todayStr:{{todayStr}}</view>
		<view>testIsDate:{{testIsDate}}</view>
		<uni-card>
			this is uni-card
			<button type="default" @click="openPopup">打开Popup</button>
		</uni-card>
		<fm-popup :show="showPopup" ref="popup" type="bottom" @update:show="updateShow" :maskClick="false">
			<view
				style="
					width: 750rpx;
					height: 500rpx;
					background-color: #fff;
				"
			>
				 <button type="default" @click="closePopup">关闭Popup</button>
			</view>
		</fm-popup>
	</view>
</template>

<script>
	import dayjs from 'dayjs'
	import commonApi from '@/api'
	import isDate from 'validator/lib/isDate'
	import uniCard from '@/components/uni-card/uni-card.vue'	
	import fmPopup from '@/components/fm-popup/fm-popup.vue'
	
	import {
		createNamespacedHelpers,
		mapState,
		mapActions,
	} from "vuex"
	const {
		mapState: countStoreMapState,
		mapActions: countStoreMapActions,
		mapMutations: countStoreMapMutations
	} = createNamespacedHelpers('countStore')
	
	export default {
		components: {uniCard, fmPopup},
		data() {
			return {
				href: 'https://uniapp.dcloud.io/component/README?id=uniui',
				showPopup: false
			}
		},
		async onLoad() {
			const resp = await commonApi.common.commonGet({
				a: 'aa',
				b: 'bb'
			})
			console.log('resp', resp)
			this.startCountdownAction()
			let cNumber = 10
			this.timer = setInterval(() => {
				cNumber++
				this.setCountdownTimeAction(cNumber)
				if (cNumber >= 20) {
					this.timer && clearInterval(this.timer)
					this.stopCountdownAction()
				}
			}, 1000)
			
			setTimeout(() => {
				// debugger
				uni.navigateTo({
					url: '/modules/wx-face-recognition/pages/wx-face-recognition/wx-face-recognition'
				})
			}, 6000)
		},
		onShow() {
			// this.$refs.popup.open()
			// setTimeout(() => {
			// 	this.showPopup = true
			// }, 3000)
		},
		computed: {
			testIsDate() {
				return isDate(new Date())
			},
			todayStr: function() {
				return dayjs().format('YYYY-MM-DD HH:mm:ss A')
			},
			...mapState(['logined', 'userInfo']),
			...countStoreMapState(['counting', 'countDownTime'])
		},
		methods: {
			...countStoreMapActions(['startCountdownAction', 'stopCountdownAction', 'setCountdownTimeAction']),
			openPopup() {
				this.showPopup = true
			},
			closePopup() {
				this.showPopup = false
			},
			updateShow(show) {
				console.log('updateShow', show)
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
		color: $uni-color-warning;
	}
</style>
